<template>
    <div>
<van-nav-bar title="登录" class="navbar">
    <template #left>  <router-link to="/IndiviDual" class="text">返回</router-link></template>
  <template #right><router-link to="/register">注册</router-link></template>  
</van-nav-bar>

<van-panel >
<van-field v-model="tel" type="tel" label="手机号"  placeholder="请输入手机号" @blur.native.capture="checkUser"  :right-icon="user" />
<van-field v-model="password" type="password" label="密码" placeholder="请输入密码"  class="shuru"  @blur.native.capture="checkPwd" :right-icon="pwd"/>
<van-button color="#0aa1ed"  size="large" @click="checkFrom" :state="data">登录</van-button>  

</van-panel>


    </div>
</template>

<script>
 export default {
  data() {
    return {
    tel:'',
    user:'',
    pwd:'',
    password:'',
    data:null
    };
  },


methods:{
     //验证用户名
checkUser(){
    let exp=/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
    if(exp.test(this.tel)){
        console.log('验证通过')
        this.user="passed"
        return true
    }else{
        console.log('用户名验证失败')
         this.user="close"
        return false
    }

},
//验证密码
checkPwd(){
let exp=/^\d{6}$/
if(exp.test(this.password)){
    
    console.log('密码正确')
    this.pwd="passed"
  
    return true
}else{
console.log('密码验证失败')
this.pwd="close"
return false
}


}, 
checkFrom(){
if(this.checkUser()&& this.checkPwd()){

this.axios.post('/login',`phone=${this.tel}&&upwd=${this.password}`).then(res=>{
  if(res.data.code==200){
            console.log(res.data.result)
            this.data=res.data.result
          this.$toast({message:'登录成功，跳转到个人主页。。。'})
            this.$store.commit('saveUsername',this.data.user_name)
         this.$store.commit('saveUserid',this.data.uid)
         this.$router.push('/IndiviDual')
        }else{
          this.$messagebox({
            title:'提示',
            message:'登录失败，账号或者密码有错'
        })
        }
       })
}else{
    console.log('快速登录失败')
    // this.checkButton='false'
}
} 

}
 }
</script>
<style src="../assets/css/main.css"></style>

<style scoped>
.shuru{
    margin: 10px 0;
}
.text{
  color: black;
}
</style>